<template>
  <div id="map">
    <Top></Top>
    <Nav></Nav>
    <Navh></Navh>
    <Swiper></Swiper>
    <NavS :theam="theam"></NavS>

    <div class="swiper-container" id="setswiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <SwiperNav></SwiperNav>
        </div>
        <div class="swiper-slide">
          <SwiperNav></SwiperNav>
        </div>
        <div class="swiper-slide">
          <SwiperNav></SwiperNav>
        </div>
      </div>

      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div>
      <NavS :theam="theam1"></NavS>
      <Content :content="content" :img="image"></Content>
    </div>
    <div>
      <NavS :theam="theam1"></NavS>
      <Content :content="content1" :img="image1"></Content>
    </div>
    <div>
      <NavS :theam="theam2"></NavS>
      <Content :content="content2" :img="image1"></Content>
    </div>
    <div>
      <NavS :theam="theam3"></NavS>
      <Content :content="content3" :img="image"></Content>
    </div>
    <div></div>
    <Ping></Ping>
  </div>
</template>
<script>
import Top from "@/components/top.vue";
import Ping from "@/components/pingpai.vue";
import Navh from "@/components/BX-nav.vue";
import Nav from "@/components/BX-indexHeard.vue";
import NavS from "@/components/BX-indexNav.vue";
import Swiper from "@/components/BX-swiper.vue";
import SwiperNav from "@/components/Bx-swiperNav.vue";
import Content from "@/components/BX-indexContent.vue";

import Swiperset from "swiper";
export default {
  components: {
    Top,
    Ping,
    Nav,
    Navh,
    Swiper,
    NavS,
    SwiperNav,
    Content
  },
  data() {
    return {
      theam: {},
      theam1: {},
      theam2: {},
      theam3: {},
      content: "",
      image: [],
      content1: "",
      content2: "",content3: "",
      image1: []
     
    };
  },
  created() {
    var _this = this;
    var url = "http://localhost:3000";
    _this.$axios
      .post(url + "/index/content")
      .then(function(response) {
        _this.content = response.data.result.one;
        _this.content1 = response.data.result.two;
         _this.content2 = response.data.result.thress;
        _this.content3 = response.data.result.frou;
        _this.theam = response.data.theam[0];
        _this.theam1 = response.data.theam[1];
        _this.theam2 = response.data.theam[2];
        _this.theam3 = response.data.theam[3];
        window.console.log(_this.theam);
        // 获取图片
        for (var i in _this.content) {
          _this.image.push(
            require("../assets/images/" + _this.content[i].image)
          );
        }
        for (var j in _this.content1) {
          _this.image1.push(
            require("../assets/images/" + _this.content1[j].image)
          );
        }

        
      })
      .catch(function(error) {
        window.console.log(error);
      });
  },
  mounted() {
    new Swiperset("#setswiper", {
      loop: true,
      autoplay: true,
      delay: 2000,
      direction: "horizontal",
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        type: "bullets"
        //type: 'fraction',
        //type : 'progressbar',
        //type : 'custom',
      }
    });
  },
  methods:{
    showcar(ser){
      window.console.log("11111111111111")
      window.console.log(ser)
      1
    }
  }
};
</script>
<style scoped>
#map,
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  width: 100%;
}
</style>